@charset "UTF-8";
header{
   background-image:url(/images/code/code-detail-bg.png);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:100%;
   height:16.5rem;
   position:relative;
   color:#fff;
   text-align:center;
   font-size:$fs11;
    margin:1rem;
	.flag{
	    position:absolute;
	    left: 0.4rem;
	    top: 0.2rem;
	    overflow: hidden;
	    @include top-left-border-radius(0.4rem);
		.triangle{
			@include triangle-top-left(3.8rem,3.8rem,#bfbfbf);
		}
		.text{
		    position: absolute;
		    color: #fff;
		    z-index: 100;
		    left:0;
		    bottom: 1.8rem;
		    font-size: 0.9rem;
		    white-space: nowrap;
		    transform: rotate(-45deg);
		    text-align: center;
		}
	}

   .donation{
   		.icon-donation{
   			@include mix-donation();
   		}

		position:absolute;
		top:1.5rem;
		right:1.5rem;
		color:#fff;
   }
   .price{
   	   font-size:3.5rem;
		padding:1.4rem 0 0.8rem;
	   em{
   			font-size:2.7rem;
	   }
   }
   .title{
		font-size:$fs15;
   }
   .condition{
   		padding:0.4rem 0;
       span{
	       position:relative;
	       display:inline-block;
	       padding:0 3.2rem;
	       &:before,&:after{
	       	position:absolute;
	       	content:"";
	       	width:5rem;
	       	height:0;
	       	top:48%;
	       	border-bottom: 1px solid #fff;
		    -webkit-transform-origin: 0 0;
		    -moz-transform-origin: 0 0;
		    -ms-transform-origin: 0 0;
		    -o-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scale(0.5, 0.5);
		    -ms-transform: scale(0.5, 0.5);
		    -o-transform: scale(0.5, 0.5);
		    transform: scale(0.5, 0.5);
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
	       }
	       &:before{

	       	left:0;


	       }
	       &:after{
	       	    right: -2.5rem;
	       }
       }

   }
	&.invalid{
		background-image:url(/images/code/code-detail-invalid-bg.png?v=1);
		.price,.title,.condition,.valid-time{
			color:#a6a6a6;
		}	
		.condition{
			span{
			  &:before,&:after{
			  	background-color:#a6a6a6;
			  }
			}
		}
		.donation{
		    color:#a6a6a6;
	   		.icon-donation{
	   			@include mix-donation-disabled();
	   		}
		}
			
	}
		
}
